
<template>
  <el-card
    class="app-container content_box"
    shadow="always"
  >
    <div>
      <!-- title -->
      <!-- <div class="header_title_box">
        <h2>邮编分区管理</h2>
      </div> -->
      <!-- <div class="select_form_box">
        <div class="filter-container">
          <el-input v-model="queryParam.name" size="small" placeholder="搜索邮编分区" class="input-with-select mr16" @keyup.enter.native="handleSearch" />
        </div>
      </div> -->
      <form-selections
        :is-active="isActive"
        :items="formItems"
        :query-param.sync="queryParam"
        display="block"
        @handleSearch="handleSearch"
      />
      <div class="select_flex">
        <div class="operation_button_box">
          <el-button
            v-action="'product@exportProductPrice'"
            :disabled="data.length?false:true"
            size="small"
            type="primary"
            @click="formVisibleDown=true"
          >导出</el-button>
        </div>
        <div>
          <el-button
            size="small"
            type="primary"
            class="filter-item search"
            icon="el-icon-search"
            @click="handleSearch"
          >
            搜索
          </el-button>
          <el-button
            size="small"
            icon="el-icon-refresh"
            @click="handleRefresh"
          >刷新</el-button>
          <el-button size="small" @click="isActive=!isActive">{{ isActive?'展开':'收起' }}</el-button>
        </div>
      </div>
      
      
      <div v-loading="loading">
        <el-table
          ref="multipleTable"
          :data="data"
          tooltip-effect="dark"
          style="width: 100%"
          :max-height="screenHeigh"
          border
          fit
        >
          <el-table-column
            align="center"
            label="编码"
            prop="code"
          />
          <el-table-column
            align="center"
            label="中文名称"
            prop="name_ch"
          />
          <el-table-column
            align="center"
            label="英文名称"
            prop="name_en"
          />
          <el-table-column
            align="center"
            label="upc"
            prop="bar_code_upc"
          />
          <el-table-column
            align="center"
            prop="supplier_name"
            label="供应商"
          />
          <el-table-column
            align="center"
            prop="purchase_price_rmb"
            label="采购价格（RMB）"
          />
          <el-table-column
            align="center"
            prop="purchase_price_usd"
            label="采购价格（USD）"
          />
        </el-table>
        <el-pagination
          v-if="paginate.total > 0"
          class="pagination_box"
          background
          :current-page="paginate.current"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paginate.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-------- 回到顶部 ------------>
      <!-- <el-backtop :visibility-height="200" :bottom="100" target=".app-main .content_box" /> -->
      <el-backtop :visibility-height="60">
        <i class="el-icon-caret-top" />
      </el-backtop>
      <!--下载字段选择-->
      <DownModul
        url="products/exportProductPrice"
        :search-param="queryParam"
        :form-visible-down.sync="formVisibleDown"
        titel="导出字段选择"
        :options-modul="optionsModul"
      />
    </div>
  </el-card>

</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
import DownModul from '@/components/DownModul/index.vue'
import { getEntityWarehouseList } from '@/utils/publicData'
import cacheList from '@/layout/mixin/cacheList'
export default {
  name: 'PriceSeeList',
  directives: {
    action
  },
  components: { DownModul },
  mixins: [formOperate,cacheList],
  data() {
    return {
      otherHeight:365,
      componentName: 'PriceSeeList',
      optionsModul: [
        {
          key: 'code',
          label: '商品编码'
        },
        {
          key: 'name_ch',
          label: '中文名称'
        },
        {
          key: 'name_en',
          label: '英文名称'
        },
        {
          key: 'bar_code_upc',
          label: 'UPC条码'
        },
        {
          key: 'supplier_name',
          label: '供应商'
        },
        {
          key: 'purchase_price_rmb',
          label: '采购价格（RMB）'
        },
        {
          key: 'purchase_price_usd',
          label: '采购价格（USD）'
        }
      ],
      virtualWarehouseList: [],
      formVisibleFile: false,
      url: '/products/price/list',
      queryParam: {
        code: '',
        name_ch: '',
        name_en: '',
        supplier_name: ''
      },
      formItems: [
        {
          label: '系统sku',
          key: 'code',
          type: 'input',
          placeholder: '请输入系统sku'
        },
        {
          label: '中文名',
          key: 'name_ch',
          type: 'input',
          placeholder: '请输入中文名'
        },
        {
          label: '英文名',
          key: 'name_en',
          type: 'input',
          placeholder: '请输入中文名'
        },
        //
        {
          label: '供应商',
          key: 'supplier_name',
          type: 'input',
          placeholder: '请输入供应商名'
        }
      ],
      loading: false,
      formVisible: false,
      formFieldsData: {
        dest_zip: '',
        origin: '',
        state: '',
        zone: ''
      },
      formName: 'zipCodes',
      formLabelWidth: '150px',
      rules: {
        dest_zip: [
          { required: true, message: '请输入dest_zip', trigger: 'blur' },
          { pattern: /^([0-9\-]+)$/, message: '请输入数字或者- ', trigger: 'blur' }
        ],
        origin: [
          { required: true, message: '请输入origin', trigger: 'blur' },
          { pattern: /^([0-9\-]+)$/, message: '请输入数字或者- ', trigger: 'blur' }
        ],
        state: [{ required: true, message: '请输入邮政区号', trigger: 'blur' }],
        zone: [{ required: true, message: '请选择Zone', trigger: 'blur' }]
      },
      stateList: [],
      zoneList: []
    }
  },
  created() {
    const vm = this
    vm.getDic() // 获取字典
    getEntityWarehouseList().then(data => {
      vm.virtualWarehouseList = data
    })
  },
  methods: {
    getDic() {
      const vm = this
      vm.$cache.getDic('zipcode_state').then(res => {
        vm.stateList = res
      })
      vm.$cache.getDic('zipcode_zone').then(res => {
        vm.zoneList = res
      })
    },
    // 导入
    importFile() {
      this.formVisibleFile = true
      console.log('=========暂未实现=====')
    },
    beforeCreate() {
      Object.keys(this.formFieldsData).forEach(k => {
        this.formFieldsData[k] = ''
      })
    },
    handleUpdateNew(data) {
      this.id = data.id
      this.$http.get(`zipCode/${data.id}`).then(res => {
        const dataObj = res.data
        this.formFieldsData = dataObj
        this.formVisible = true
      })
    },
    handleSubmitNew() {
      this.$refs['zipCodes'].validate((valid) => {
        if (valid) {
          // 编辑
          if (this.id) {
            this.$http.put(`zipCode/${this.formFieldsData.id}`, this.getData()).then(response => {
              if (response.code === 10000) {
                this.$message.success('编辑成功')
                this.formVisible = false
                this.resetFormFields()
                this.handleRefresh()
                this.id = null
              } else {
                this.$message.error(response.message)
              }
            })
          } else {
            // 判断个人信息
            this.$http.post('zipCode', this.formFieldsData).then(response => {
              if (response.code === 10000) {
                this.$message.success('添加成功')
                this.formVisible = false
                this.resetFormFields()
                this.handleRefresh()
              } else {
                this.$message.error(response.message)
              }
            })
          }
        }
      })
    },
    // 获取添加参数组合
    getData() {
      const data = {
        origin: this.formFieldsData.origin,
        dest_zip: this.formFieldsData.dest_zip,
        state: this.formFieldsData.state,
        zone: this.formFieldsData.zone
      }
      return data
    }
  }
}

</script>

<style lang="scss" scoped>
.width500 {
  width: 500px !important;
}
</style>
